<template>
  <div>
    <div class="usergrkj" v-if="is_show=='true'">
      <div class="yhxx">
        <img :src="userxx.headp" alt="" />
        <div>
          <span>{{ userxx.uname }}</span>
          <div>{{ userxx.signature }}</div>
          <div>
            <span><i class="el-icon-star-on"></i>{{ userxx.ulike }}</span>
            <span><i class="el-icon-view"></i>{{ userxx.collection }}</span>
            <span><i class="el-icon-s-custom"></i>{{ userxx.fans }}</span>
          </div>
        </div>
      </div>
      <div class="spxx">
        <div class="lb_main" v-for="i in mysp" :key="i.rid">
          <div>
            <router-link :to="`/recipexq/${i.rid}`">
              <img :src="i.r_pic" alt="" class="tptp" />
            </router-link>
          </div>
          <div>
            <router-link :to="`/recipexq/${i.rid}`">{{ i.rname }}</router-link>
            <span>评分：{{ i.score }}</span>
          </div>
          <span>
            {{ i.synopsis }}
          </span>
        </div>
      </div>
    </div>
    <div v-else class="kjwkf">
      <div>
        <router-link to="/shouye">去首页</router-link>
        <img src="/qttp/1112.jpg" alt="" />
        <router-link to="/recipelb">去广场</router-link>
      </div>
      <span>用户空间暂未开放，去其他地方逛逛？</span>
    </div>
  </div>
</template>

<script>
export default {
  props: ["name"],
  mounted() {
    // console.log(this.name)
    this.getuserxx();
    this.getrecipexx();
    // let is_show=res.data.data[0].is_show
  },
  computed:{
    // is_show(){
    //   // return userxx.is_show
    // }
  },
  data() {
    return {
      userxx: {},
      mysp: [],
      is_show: 'false',
    };
  },
  methods: {
    getuserxx() {
      const url = "/ulist";
      const params = `uname=${this.name}`;
      this.axios.post(url, params).then((res) => {
        this.userxx = res.data.data[0];
        this.is_show = res.data.data[0].is_show;
        console.log(this.is_show,res.data.data[0].uname);
        // console.log(this.userxx)
      });
    },
    getrecipexx() {
      const url = "/usersplist";
      // console.log(this.name)
      const params = `r_uname=${this.name}`;
      this.axios.post(url, params).then((res) => {
        // 截取前六个
        this.mysp = res.data.data.slice(0, 6);
        console.log(this.mysp);
      });
    },
  },
};
</script>

<style lang="scss">
.usergrkj {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  margin-top: 25px;
  .yhxx {
    width: 300px;
    margin: 10px 25px;
    border: 8px inset rgb(117, 117, 117);
    background-color: rgb(240, 238, 238);
    img {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      margin-top: 60px;
      margin-bottom: 60px;
    }
    > div {
      > span {
        display: block;
        font-size: 30px;
        text-align: center;
        margin-bottom: 10px;
      }
      > div {
        display: flex;
        justify-content: space-evenly;
        font-size: 18px;
        margin: 10px;
        height: 80px;
      }
    }
  }
  .spxx {
    width: 700px;
    margin: 10px 25px;
    border: 8px inset rgb(117, 117, 117);
    background-color: rgb(240, 238, 238);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    .lb_main {
      width: 30%;
      height: 240px;
      img {
        width: 80%;
        height: 120px;
        border-radius: 15px;
        text-align: center;
        display: flex;
        justify-content: center;
        margin: 0 auto;
        margin-top: 20px;
      }
      > div:nth-child(2) {
        width: 80%;
        margin: 5px auto;
        text-align: center;
        display: flex;
        justify-content: space-between;
        > a {
          color: #000;
          font-size: 15px;
        }
        > span {
          font-size: 15px;
        }
      }
      > span {
        display: inline-block;
        width: 85%;
        margin: 0 auto;
        text-align: center;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3; /* 这里是超出几行省略 */
        overflow: hidden;
        font-size: 14px;
        text-indent: 2em;
      }
    }
  }
}
.kjwkf {
  span {
    display: inline-block;
    width: 100%;
    font-size: 35px;
    margin-top: 30px;
    text-align: center;
  }
  > div {
    margin: 0 auto;
    text-align: center;
    img {
      border-radius: 50%;
      width: 200px;
      height: 200px;
      margin-top: 70px;
    }
    a {
      font-size: 22px;
      display: inline-block;
      border-radius: 15px;
      width: 100px;
      line-height: 40px;
      background-color: rgb(122, 118, 118);
      position: relative;
      margin: 0 15px;
      color: #000;
    }
    a:first-child {
      top: -85px;
      background-color: #95caca;
    }
    a:last-child {
      top: -135px;
      background-color: #004b97;
    }
  }
  width: 1200px;
  height: 500px;
  margin: 0 auto;
}
</style>
